<!-- 供应商对账看板 -->

<script setup>

import {onMounted, ref} from "vue";
import CommonBox from "../../components/CommonBox.vue";
import CheckingFunnel from "./CheckingFunnel.vue";
import SupplierChart from "./SupplierChart.vue";

import screenApi from "../../router/screen.js";

const tableData = ref([]);

function tableRowClassName(rowIndex){
  if (rowIndex.rowIndex % 2 !== 0) {
    return 'evenRow';
  }
  return 'oddRow';
}

function getList(supplierId) {
  screenApi.getList(supplierId).then(res=>{
    tableData.value = res;
  });
}
//定义map对象
const dataTotal = ref([]);
function queryAmountMap(supplierId) {
  screenApi.queryAmountMap(supplierId).then(res=>{
    dataTotal.value = res;
  });
}

onMounted(async () => {
  //列表数据
  getList('');
  //第一排数据
  queryAmountMap('');
});
</script>

<template>

  <div class="head">
    <h1>财务对账</h1>
  </div>

  <div class="board-row">

    <common-box>
      <div class="box">
        <div class="vitas-data">
          <div class="vitas-content">
            <p>
              <div>{{dataTotal.orderName }}</div>
              <div style="color:green">{{Number(dataTotal.orderAmount).toFixed(2) }}</div>
            </p>
          </div>
        </div>
      </div>
    </common-box>

    <common-box>
      <div class="box">
        <div class="vitas-data">
          <div class="vitas-content">
            <p>
              <div>{{dataTotal.goodsName}}</div>
              <div style="color:green">{{Number(dataTotal.goodsAmount).toFixed(2) }}</div>
            </p>
          </div>
        </div>
      </div>
    </common-box>

    <common-box>
      <div class="box">
        <div class="vitas-data">
          <div class="vitas-content">
            <p>
              <div>{{dataTotal.storeName}}</div>
              <div style="color:green">{{Number(dataTotal.storeAmount).toFixed(2) }}</div>
            </p>
          </div>
        </div>
      </div>
    </common-box>

    <common-box>
      <div class="box">
        <div class="vitas-data">
          <div class="vitas-content">
            <p>
              <div>{{dataTotal.accountName}}</div>
              <div style="color:green">{{Number(dataTotal.accountAmount).toFixed(2) }}</div>
            </p>
          </div>
        </div>
      </div>
    </common-box>

    <common-box>
      <div class="box">
        <div class="vitas-data">
          <div class="vitas-content">
            <p>
              <div>{{dataTotal.paymentName}}</div>
              <div style="color:green">{{Number(dataTotal.paymentAmount).toFixed(2) }}</div>
            </p>
          </div>
        </div>
      </div>
    </common-box>
  </div>

  <div class="board-row">
    <checking-funnel></checking-funnel>
    <supplier-chart></supplier-chart>
  </div>

  <div class='moduleTable'>
    <!-- //设置表格头的样式和字体 -->
    <el-table :data="tableData"  style="width: 100%;margin:0 auto; padding: 17px 0;
                --el-table-border-color: none;
                --el-table-bg-color: none;
                --el-table-tr-bg-color: none"
              :row-class-name='tableRowClassName'
              :cell-style="{'color':'#FFFFFF','text-align':'center'}"
              :header-cell-style="{'background':'#375A88','color':'rgba(2,217,253,0.8)','text-align':'center'}"
    >
      <el-table-column prop="purchaseOrderNo" label="采购订单号" class="name-content"/>
      <el-table-column prop="supplierName" label="供应商"  />
      <el-table-column prop="purchaseAmountTotal" label="原材料总金额" />
      <el-table-column prop="storeAmountTotal" label="已入库总金额" />
      <el-table-column prop="accountAmountTotal" label="已对账总金额" />
      <el-table-column prop="unAccountAmountTotal" label="未对账总金额" />
      <el-table-column prop="invoiceAmountTotal" label="已开票总金额" />
      <el-table-column prop="unInvoiceAmountTotal" label="未开票总金额" />
      <el-table-column prop="paymentAmountTotal" label="已付款总金额" />
      <el-table-column prop="unPaymentAmountTotal" label="未付款总金额" />
    </el-table>
  </div>

</template>

<style lang="scss">
.board-row {
  display: flex;
  gap: 1em;
  padding: 1em;
}

.board-row>div {
  flex: 1;
}

.vitas-data {
  border-radius: 50%;
  border: 3px solid #49bcf7;
  display: block;
  width: 10em;
  height: 10em;
  justify-content: center;
  align-items: center;
}

.vitas-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #ffffff;
  font-size: 13px;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.evenRow {
  background: #0C385E !important;
  font-size: 13px;
}
.oddRow{
  background:#062340 !important;
  font-size: 13px;
}

.name-content {
  flex-grow: 1;
  white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selectOption{
  .el-input__wrapper{
    background-color: 	rgba(15,112,169,0.5) !important;
    border-radius: 50px;
    box-shadow: 0 0 0 0;
    padding: 0;
    border: 1px solid #0F70A9;
    width: 118px;
  }
  .el-input__inner {
    padding-left: 15px;
    line-height: 32px;
    font-size: 16px;
    color: #02D9FD;
  }
  .el-input__suffix{
    padding-right: 15px;
  }
  .el-select .el-input__wrapper.is-focus {
    box-shadow: 0 0 0 0 !important;
  }
  .el-select .el-input.is-focus .el-input__wrapper{
    box-shadow: 0 0 0 0 !important;
  }
}
</style>